<template>
    <div class="hotelOptionEmpty">
        <div class="tiBox flex aCenter jsb mb20">
            <div class="pt20">
                <div class="title flex mb10">
                    <div>
                        {{ title }}
                    </div>
                    <div>

                    </div>
                </div>
                <div class="flex aCenter mb10 sonTitle">
                    <div class="desc">
                        {{ descT }}
                    </div>
                    <div class="iconBg"></div>
                </div>
                <div class="address">
                    address：20 East Nanjing Road
                </div>
            </div>
            <div class="rightBox">
                <div class="br10 mr10 rightBoxSon">
                    <span class="fsNum">8.8</span>
                    grade
                </div>
                <div class="rSonTwo">Great</div>
            </div>
        </div>
        <div class="imgGroup flex jsb">
            <div class="imgBox pRelative">
                <img style="width:100%;height:100%;" :src="priceOne" alt=""/>
                <div class="pAbsolute descImg">Living on the Bund, dreaming back to the Republic of China</div>
            </div>
            <div class="flex flexWrap rightBoxI jsb">
                <div class="smallImg" v-for="(item,index) in defaultList" :key="index" >
                    <img width="150" height="120" :src="item" />
                </div>
            </div>
        </div>
        <div class="mb40">
            <el-alert
                title="Reminder"
                type="warning"
                description="The date or number of people you selected is not available, please modify and try again."
                show-icon
            />
        </div>
        <div>
            <div class="flex aCenter Line">
                <div class="rTitle">essential information</div>
                <div class="mr33 content">
                    <div class="tLeft">
                        <div class="">
                            execute OTA: hotelbeds
                        </div>
                        <div class="">
                            Renovated: 2010
                        </div>
                    </div>
                </div>
                <div class="mr33 content">
                    <div class="tLeft">
                        <div class="">
                            business qualification: business qualification
                        </div>
                        <div class="">
                            Hotel size: 270 rooms
                        </div>
                    </div>
                </div>
                <div class="content">
                    Completed in: 1929
                </div>
            </div>
            <div class="aCenter Line">
                <div class="mb10 rTitle">Travel tips</div>
                <div class="mr33 content">
                    The following fees and deposits are charged at the time of service, check-in or check-out.

                    The buffet breakfast costs approximately CNY 259 for adults and CNY 130 for children
                    In-room Wi-Fi: CNY 99 per night (Rates are subject to change without notice)
                    Wired Internet access in room: CNY 99 (inclusive per night, rates subject to change without prior notice)
                    Wireless Internet access in public areas: CNY 99 per day (rates subject to change without notice)
                    Wired Internet access in public areas: CNY 99 (package per day, price subject to change without notice)
                    Rollaway bed fee: CNY 403.0 per night
                    The above list may not be complete. These fees and deposits may not include taxes and are subject to change at any time.

                    Massage services and SPA treatments require booking. Reservations can be made by contacting the property prior to arrival using the contact details on the booking confirmation.
                    Children 6 years and under stay free of charge if they share a room with a parent or guardian and use existing beds.
                </div>
            </div>
        </div>
        <div class="bottomBox">

        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
import { useRoute } from 'vue-router';
    const route=useRoute();
    console.log(route.query);
    const title=ref('')
    const descT=ref('')
    const defaultList=ref([]);
    const priceOne=ref(new URL(`@/assets/img/shanghaiDetail/second.jpeg`, import.meta.url).href);
    if(route.query.id&&route.query.id==1){
        defaultList.value=[
            new URL(`@/assets/img/shanghaiDetail/second1.jpeg`, import.meta.url).href,
            new URL(`@/assets/img/shanghaiDetail/second2.jpeg`, import.meta.url).href,
            new URL(`@/assets/img/shanghaiDetail/second3.jpeg`, import.meta.url).href,
            new URL(`@/assets/img/shanghaiDetail/second4.jpeg`, import.meta.url).href,
            new URL(`@/assets/img/shanghaiDetail/second5.jpeg`, import.meta.url).href,
            new URL(`@/assets/img/shanghaiDetail/second6.jpeg`, import.meta.url).href
        ]
        title.value='Fairmont Peace Hotel'
        descT.value='Shanghai Peace Hotel'
        priceOne.value=new URL(`@/assets/img/shanghaiDetail/second.jpeg`, import.meta.url).href
    }else{
        title.value='Atour Hotel (Shanghai The Bund, Old Wharf)'
        descT.value='Aldo Hotel Shanghai Bund Old Quay'
        defaultList.value=[
            new URL(`@/assets/img/shanghaiDetail/third1.jpeg`, import.meta.url).href,
            new URL(`@/assets/img/shanghaiDetail/third2.jpeg`, import.meta.url).href,
            new URL(`@/assets/img/shanghaiDetail/third3.jpeg`, import.meta.url).href,
            new URL(`@/assets/img/shanghaiDetail/third4.jpeg`, import.meta.url).href,
            new URL(`@/assets/img/shanghaiDetail/third5.jpeg`, import.meta.url).href,
            new URL(`@/assets/img/shanghaiDetail/third6.jpeg`, import.meta.url).href
        ]
        priceOne.value=new URL(`@/assets/img/shanghaiDetail/third.jpeg`, import.meta.url).href

    }


</script>

<style lang="less" scoped>
.hotelOptionEmpty{
    width:1000px;
    margin :0 auto;
}
.imgGroup{
        .rightBoxI{
            width:312px;
        }
        .imgBox{
            width:680px;
            height:380px;
            .descImg{
                color:#fff;
                position: absolute;
                left: 15px;
                bottom: 15px;
                padding: 8px;
                background-color: rgba(0, 0, 0, .75);
                border-radius: 3px;
                font-size: 14px;
                line-height: 24px;
            }
            img{
                width:100%;
                height:100%;
                border-radius: 4px;
            }
        }
        .smallImg{
            margin-bottom: 10px;
            img{
                width:150px;
                height:120px;
                border-radius: 4px;
            }
        }
    }
    .tiBox{
        align-items: end;
        .title{
            font-size: 24px;
        }
        .desc{
            font-size: 14px;
            line-height: 24px;
            color: #666;
        }
        .iconBg{
            margin-left: 10px;
            height: 13px;
            width: 70px;
            overflow: hidden;
            vertical-align: -1px;
            display: inline-block;
            background: url(./../assets/img/hotel/hotel-detail-icon8.png) no-repeat;
            background-position: -150px -230px;
        }
    }
    .rightBox{
        display: flex;
        align-items: center;
        .rightBoxSon{
            font-size: 14px;
            color: #666;
            display: flex;
            align-items: center;
            padding-right: 10px;
            .fsNum{
                font-size: 30px;
                font-style: normal;
                color: #ff8a00;
            }
        }
        .rSonTwo{
            border-left: 1px solid #e5e5e5;
            line-height: 45px;
            padding-left: 10px;
        }
    }
    .address{
        line-height: 24px;
        font-size: 12px;
        color: #999;
    }
    .Line{
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 30px;
        margin-bottom: 20px;
        .rTitle{
            margin-right: 90px;
        }
        .mr33{
            margin-right:33px;
        }
        .content{
            font-size: 14px;
            color:#666;
        }
    }
    .bottomBox{
        padding:20px;
    }
</style>